<template>
  <div class="person">
    <h1>情况三：监视 reactive 定义的对象类型数据</h1>
    <h2>当前姓名为：{{ person.name }}</h2>
    <h2>当前年龄为：{{ person.age }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改对象</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Person',
}
</script>

<script setup lang="ts">
import {reactive, watch} from 'vue';

// 定义对象类型数据
let person = reactive({
  name: '张三',
  age: 18
});


// 监视 person 的变化（深度监视）
watch(person, (newValue, oldValue) => {
  console.log('person 变化:', newValue, oldValue);
}, {deep: true});


// 修改 person.name 的函数
function changeName() {
  person.name += '~';
}

// 修改 person.age 的函数
function changeAge() {
  person.age += 1;
}

// 修改整个 person 对象的函数
function changePerson() {
  Object.assign(person, {
    name: '李四',
    age: 20
  });
}
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  padding: 0 5px;
  margin: 5px;
}

li {
  font-size: 20px; /* 修正拼写错误 */
}
</style>